.loading {
  font-size: var(--Font-Size-Title-Large);
  z-index: 50;
  top: 50%;
  width: 100%;
  position: none;
  text-align: center;
  color: var(--Color-Crystal);

  .sprite {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: url('../../assets/sprite.png');
    background-position: 0 0;
    animation: sprite-walk 0.3s steps(5) 0s infinite forwards;
  }

  @keyframes sprite-walk {
    to {
      background-position: -240px 0;
    }
  }

  .loading-text {
    display: inline-block;
    margin: 0 0.2em;
    animation: loading-text 0.8s ease-out 0s infinite alternate;
  }

  @keyframes loading-text {
    from {
      transform: translateY(0.25em);
      opacity: 0.5;
    }

    to {
      transform: translateY(-0.25rem);
      opacity: 0.5;
    }
  }

  &.loading-fixed {
    position: fixed;
  }
}
